<%--
  Created by IntelliJ IDEA.
  User: Ag
  Date: 2022/4/21
  Time: 23:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="${APP_PATH}/dist/js/jquery.min.js"></script>

    <!--阿里图标库-->
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1632750_204xwxiwzht.css?1583918713" />
    <link rel="stylesheet" href="${APP_PATH}/dist/css/style2.css">
    <link  rel="styleSheet" type="text/css" href="${APP_PATH}/dist/css/bootstrap.css"/>
    <link type="text/css" rel="styleSheet" href="${APP_PATH}/dist/css/bootstrap.min.css"/>

</head>
<body>
<div class="body_con">
    <div class="body_top">头部</div>
    <div class="body_left">
        <ul class="body_left_list">
            <li>
                <label>
                    <span>宣 传</span>
                    <i class="iconfont iconxiajiantou"></i>
                    <a href="javascript:;"></a>
                </label>
                <ul>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目1栏目1</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目2</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目3</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <label>
                    <span>服 务</span>
                    <i class="iconfont iconxiajiantou"></i>
                    <a href="javascript:;"></a>
                </label>
                <ul>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目1</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目2</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目3</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <label>
                    <span>营 销</span>
                    <i class="iconfont iconxiajiantou"></i>
                    <a href="javascript:;"></a>
                </label>
                <ul>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目1</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目2</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>二级栏目3</span>
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="javascript:;"></a>
                        </label>
                        <ul>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>三级栏目</span>
                                    <i class="iconfont iconyoujiantou"></i>
                                    <a href="javascript:;"></a>
                                </label>
                                <ul>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <span>四级栏目</span>
                                            <i class="iconfont iconyoujiantou"></i>
                                            <a href="javascript:;"></a>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="body_right">
        <h1>管理员页面</h1>
        <div class="container">

            <div class="row">
                <h1 class="col-lg-6">APP列表</h1>
            </div>
            <div class="col-lg-2 col-lg-offset-4">
                <button  class="btn btn-primary" id="addBtn">
                    <span class="glyphicon glyphicon-plus" >&nbsp;添加APP</span>
                </button>
            </div>
            <table class="table table-hover">
                <tr>
                    <th>APP编号</th>
                    <th>APP名称</th>
                    <th>所属平台</th>
                    <th>审核状态</th>
                    <th>发布状态</th>
                    <th>操作</th>
                </tr>
                <tbody id="book_table">

                </tbody>
            </table>

            <div class="row">
                <div class="row">
                    <div class="col-lg-6" id="pageInfo">

                    </div>
                    <div class="col-lg-6" id="pageList">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">

                            </ul>
                        </nav>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<script src="${APP_PATH}/dist/js/script.js"></script>
<script type="text/javascript" src="${APP_PATH}/dist/js/jquery-1.12.4(1).js"></script>
<script type="text/javascript">
    $(function () {
        goToPageNum(1);
    })
    //构建图书列表
    function build_books_table(data) {
        //清空历史数据
        $("#book_table").empty();
        var books = data.returnData.books.list;
        $.each(books,function (index,item) {
            //构建5个td 存放数据
            var id_td = $("<td></td>").append(item.id);
            var bookName_td = $("<td></td>").append(item.appName);
            var bookCounts_td = $("<td></td>").append(item.platforms.platform);
            var  detail_td = $("<td></td>").append(item.states.state);
            var  detail_ta = $("<td></td>").append(item.statusOfReleases.statusOfRelease);

            //操作列的td
            //编辑按钮
            var edit_btn = $("<button></button>").addClass("btn btn-sm btn-primary edit_btn").attr("data_id",item.bookId)
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("&nbsp;修改")
            //删除按钮
            var del_btn = $("<button></button>").addClass("btn btn-sm btn-danger del_btn").attr("data_id",item.bookId)
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("&nbsp;删除")
            //将操作按钮放入操作的td列
            var ac =$("<td></td>").append(edit_btn).append(del_btn)

            //将4个td 放入一个tr里
            var tr = $("<tr></tr>")
                .append(id_td)
                .append(bookName_td)
                .append(bookCounts_td)
                .append(detail_td)
                .append(detail_ta)
                .append(ac);
            //将tr添加至tbody
            tr.appendTo($("#book_table"))
        })
    }
    //构建分页信息
    function build_books_info(data) {
        $("#pageInfo").empty();
        var pageInfo = data.returnData.books;
        //节点：元素节点(标签) 文本节点（text） 属性节点  注释
        $("#pageInfo").append("当前是第"+pageInfo.pageNum+"页  "+pageInfo.pageNum+"/ "+pageInfo.pages+"共"+pageInfo.total+"条信息")
    }
    //构建分页列表信息
    function build_books_list(data) {
        $(".pagination").empty();
        //获取分页信息
        var pageInfo = data.returnData.books;
        var ul = $(".pagination");
        //生成 首页  上一页的li
        var fristPageLi = createLi("首页");
        var prePageLi = createLi("&laquo;");
        if(!pageInfo.hasPreviousPage){
            fristPageLi.addClass("disabled")
            prePageLi.addClass("disabled")
        }else{
            //添加点击事件 跳转
            liClick(fristPageLi,1);
            liClick(prePageLi,pageInfo.pageNum-1);
        }
        ul.append(fristPageLi);
        ul.append(prePageLi);
        //页码列表
        $.each(pageInfo.navigatepageNums,function (index,item) {
            var li = createLi(item);
            liClick(li,item);
            li.appendTo(ul);
        })
        var nextPageLi = createLi("&raquo;");
        var lastPageLi = createLi("末页");
        if(!pageInfo.hasNextPage){
            nextPageLi.addClass("disabled")
            lastPageLi.addClass("disabled")
        }else{
            //添加点击事件 跳转
            liClick(nextPageLi,pageInfo.pageNum+1);
            liClick(lastPageLi,pageInfo.pages);
        }
        ul.append(nextPageLi);
        ul.append(lastPageLi);
    }
    //生成li
    function  createLi(str) {
        var li = $("<li></li>").append($("<a></a>").attr("href","#").append(str));
        return li;
    }
    //给生成的li添加点击事件
    function liClick(obj,pn) {
        obj.click(function () {
            goToPageNum(pn)
        })
    }

    function goToPageNum(pn) {
        $.ajax({
            url:"${APP_PATH}/books",
            data:"pageNum="+pn,
            type:"GET",
            success:function (data) {
                console.log(data)
                build_books_table(data);
                build_books_info(data);
                build_books_list(data);
            }
        })
    }

</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
